import * as THREE from 'three';
import M from 'scripts/main.js';
import { TWEEN } from 'three/addons/libs/tween.module.min.js';
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
import {Square} from 'scripts/square.js';
import {Game} from 'scripts/game.js';

class GameList {
	constructor(book){
		let animationID;
		let objects = [];

		let camera, scene, renderer;
		let items =[
			{id:1,name:'听音找字',icon:'字🎯',type:'1'},
			{id:2,name:'看字读音',icon:'字🥌',type:'1'},
			{id:3,name:'看字找意',icon:'字🎯',type:'1'},
			{id:4,name:'看意找字',icon:'字🎯',type:'1'},
			{id:5,name:'听字找意',icon:'字🎯',type:'1'},
			{id:6,name:'听音找词',icon:'词🎯',type:'2'},
			{id:7,name:'看词读音',icon:'词🥌',type:'2'},
			{id:8,name:'看词找意',icon:'词🎯',type:'2'},
			{id:9,name:'看意找词',icon:'词🎯',type:'2'},
			{id:10,name:'听词找意',icon:'词🎯',type:'2'},
			{id:11,name:'看意找句',icon:'句🎯',type:'3'},
			{id:12,name:'看句读音',icon:'句🥌',type:'3'},
			{id:13,name:'听音找句',icon:'句🎯',type:'3'},
			{id:14,name:'看音找字',icon:'音🎯',type:'4'},
			{id:15,name:'看音读音',icon:'音🥌',type:'4'},
			{id:16,name:'看字找音',icon:'音🎯',type:'4'},
		];
		const m = new M();

		init();

		function init() {
			let targets = [];
			
			THREE.Cache.enabled = true;
			m.display("goback",true);
			m.getNode("goback").addEventListener('pointerdown', goback);
			window.addEventListener( 'resize', onWindowResize );

			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1000, 10000 );
			camera.position.z = 6000;
			scene = new THREE.Scene();
			
			for ( let i = 0; i < items.length; i ++ ) {
				var item = items[i];
				const element = document.createElement( 'div' );
				element.className = 'itemCard';
				element.tag=item;
				element.addEventListener('pointerdown', open);

				const name = document.createElement( 'div' );
				name.className = 'itemName';
				name.textContent = item.name;
				element.appendChild( name );

				const icon = document.createElement( 'div' );
				icon.className = 'itemIcon';
				icon.textContent = item.icon;
				element.appendChild( icon );

				const objectCSS = new CSS3DObject( element );
				//必须将网页对象和3d对象关联起来，才能对其进行操作
				element.parent = objectCSS;
				objectCSS.position.x = Math.random() * 4000 - 2000;
				objectCSS.position.y = Math.random() * 4000 - 2000;
				objectCSS.position.z = 6100;
				objectCSS.rotation.x = Math.random();
				objectCSS.rotation.y = Math.random();
				objectCSS.rotation.z = Math.random();
				scene.add( objectCSS );
				objects.push( objectCSS );
				
				var tag = new THREE.Object3D();
				tag.position.y = (4-Math.floor(i/4))*150-400;
				tag.position.x = (i%4) * 150 - 230;
				tag.position.z = 5000;
				tag.rotation.x = 0;
				tag.rotation.y = 0;
				tag.rotation.z = 0;
				targets.push( tag );
			}
			//

			renderer = new CSS3DRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.getElementById( 'container' ).appendChild( renderer.domElement );
			
			transform(objects,targets, 1000 );
			animate();
		}
		function open() {
			let tags = [];
			
			for ( let i = 0; i < items.length; i ++ ) {
				var tag = new THREE.Object3D();
				tag.position.x = Math.random() * 4000 - 2000;
				tag.position.y = Math.random() * 4000 - 2000;
				tag.position.z = 6100;
				tag.rotation.x = 0;
				tag.rotation.y = 0;
				tag.rotation.z = 0;
				tags.push( tag );
			}
			
			transform(objects,tags, 500 );

			setTimeout(()=>{
				let bid = book.id,gid = this.tag.id;
				destroy();
				new Game(bid,gid);
			},500);
			
		};

		function goback(){
			destroy();
			new Square();
		}
		
		function transform(objects,targets, duration ) {

			TWEEN.removeAll();

			for ( let i = 0; i < objects.length; i ++ ) {

				const object = objects[ i ];
				const target = targets[ i ];

				new TWEEN.Tween( object.position )
					.to( { x: target.position.x, y: target.position.y, z: target.position.z }, duration )
					.easing( TWEEN.Easing.Exponential.InOut )
					.start();

				new TWEEN.Tween( object.rotation )
					.to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, duration )
					.easing( TWEEN.Easing.Exponential.InOut )
					.start();

			}

			new TWEEN.Tween( this )
				.to( {}, duration )
				.onUpdate( render )
				.start();

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

			render();

		}

		function animate() {

			animationID = requestAnimationFrame( animate );

			TWEEN.update();

		}

		function render() {

			renderer.render( scene, camera );

		}

		function destroy(){
			cancelAnimationFrame(animationID)
			TWEEN.removeAll();
			scene.clear();
			renderer.content = null;

			m.getNode("goback").removeEventListener('pointerdown', goback);
			window.removeEventListener( 'resize', onWindowResize );
			m.getNode("container").removeChild(renderer.domElement);
			scene = null;
			camera = null;
			renderer = null;
			objects = null;
		}			
	}
}
export { GameList };